{% extends 'base.html' %}
{% block stylesheets %}
    <link rel="stylesheet" href="/static/css/jquery.fancybox.css">
    {{ block.super }}
{% endblock stylesheets %}

{% block staticfiles %}
    {{ block.super }}
    <script src="/static/js/jquery.fancybox.pack.js"></script>
    <script src="/static/js/products.js"></script>
{% endblock staticfiles %}

{% block title %}Welcome to index.html{% endblock %}
{% load thumbnail %}

{% block content %}
    <h1>{{ fish.name }}</h1>
    <img src="{{ fish.image.url }}"/>

    <div class="accordion">
    {% for p in fish.products.all %}
        <h3>{{ p.type.description }}</h3>
        <div class="productInfo">
            <table class="productInfoTable">
                <tr>
                    <th>Lýsing</th>
                    <th>Stærð</th>
                    <th>Magn í kassa</th>
                    <th>Kassar á bretti</th>
                </tr>
                {% for pd in p.productDetails.all %}
                <tr>
                    <td>{{ pd.name }}</td>
                    <td>{{ pd.size }}</td>
                    <td>{{ pd.boxSize }}</td>
                    <td>{{ pd.palletSize }}</td>
                </tr>
                {% endfor %}
            </table>
            <div class="productInfoImages">
                {% for img in p.images.all %}
                    {% if forloop.counter < 4 %}
                        <a class="fancybox" rel="group" href="{{ img.image.url }}" caption="{{ img.description }}">
                    {% else %}
                        <a class="fancybox hidden" rel="group" href="{{ img.image.url }}" caption="{{ img.description }}">
                    {% endif %}
                    {% thumbnail img.image "x70" as im %}
                       <img src="{{ im.url }}" alt="{{ img.description }}" height="{{ im.height }}" width="{{ im.width }}" />
                    {% endthumbnail %}
                    </a>
                {% endfor %}
            </div>
        </div>
    {% endfor %}
    </div>
{% endblock %}